<nz-card>
  <div class="searchItem">
    <span class="label">订单编号</span>
    <input nz-input placeholder="请输入订单编号" [(ngModel)]="query.orderNum"/>
  </div>
  <div class="searchItem">
    <span class="label">商品标题</span>
    <input nz-input placeholder="请输入商品标题" [(ngModel)]="query.title"/>
  </div>
  <div class="searchItem">
    <span class="label">订单状态</span>
    <nz-select [(ngModel)]="query.status" nzPlaceHolder="请选择" (ngModelChange)="queryBtn()" [nzBackdrop]="true">
      <!--      <nz-option [nzValue]="null" nzLabel="全部"></nz-option>-->
      <nz-option [nzValue]="status.id" [nzLabel]="status.name"
                 *ngFor="let status of hireDeviceService.orderStatus"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <span class="label">租赁方案</span>
    <nz-select [(ngModel)]="query.planId" nzMode="multiple"
               [nzMaxTagCount]="1" nzPlaceHolder="请选择" [nzBackdrop]="true" nzAllowClear>
      <nz-option [nzValue]="0" nzLabel="租完需归还"></nz-option>
      <nz-option [nzValue]="1" nzLabel="租完可归还/买断"></nz-option>
      <nz-option [nzValue]="2" nzLabel="租完即送"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <span class="label">租期</span>
    <nz-select [(ngModel)]="query.rper" nzMode="multiple"
               [nzMaxTagCount]="1" nzPlaceHolder="请选择" [nzBackdrop]="true" nzAllowClear>
<!--      <nz-option [nzValue]="date['id']" [nzLabel]="date['name']"-->
<!--                 *ngFor="let date of hireDateList"></nz-option>-->
      <nz-option [nzValue]="date['value']" [nzLabel]="date['name']"
                 *ngFor="let date of hireDateList"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <span class="label">用户信息</span>
    <input nz-input placeholder="请输入用户信息" [(ngModel)]="query.user"/>
  </div>
  <div class="searchItem">
    <span class="label">下单时间</span>
    <nz-range-picker id="date" nzFormat="yyyy-MM-dd" [(ngModel)]="query.date"></nz-range-picker>
  </div>
  <span class="optionBtn">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetCondition()">重置</button>
    <button nz-button nzType="primary" (click)="export()">导出</button>
  </span>
</nz-card>

<nz-card>
  <ul nz-menu nzMode="horizontal">
    <li [nzSelected]="status['id']===query['status']" nz-menu-item *ngFor="let status of hireDeviceService.orderStatus"
        (click)="tabClick(status['id'])">
      <a>{{status['name']}}{{status.id === '' ? statusNum[888] : statusNum[status.id]}}</a>
    </li>
  </ul>
  <!--表格-->
  <nz-table
    #rowSelectionTable
    nzSize="small"
    nzShowSizeChanger
    nzShowQuickJumper
    nzOuterBordered
    [nzScroll]="{ x: '1100px' }"
    [nzData]="listOfData.records"
    [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
    [nzTotal]="listOfData.total"
    [(nzPageIndex)]="query.page"
    [(nzPageSize)]="query.pageSize"
    [nzFrontPagination]="false"
    [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)"
  >
    <thead>
    <tr>
      <th nzAlign="center" [nzWidth]="'200px'" nzLeft>订单编号</th>
      <th nzAlign="center" [nzWidth]="'200px'">商品信息</th>
      <th nzAlign="center" [nzWidth]="'400px'">租期</th>
      <th nzAlign="center" [nzWidth]="'100px'">总租金（元）</th>
      <th nzAlign="center" [nzWidth]="'160px'">押金信息</th>
      <th nzAlign="center" [nzWidth]="'200px'">实付款</th>
      <th nzAlign="center" [nzWidth]="'200px'">租赁方案</th>
      <th nzAlign="center" [nzWidth]="'300px'">用户信息</th>
      <th nzAlign="center" [nzWidth]="'100px'">状态</th>
      <th nzAlign="center" [nzWidth]="'160px'">下单时间</th>
      <th nzAlign="center" [nzWidth]="'240px'" nzRight>操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of rowSelectionTable.data;let index=index;">
      <tr>
        <td nzAlign="center" nzLeft>{{ data['orderNum'] }}</td>
        <td nzAlign="center">
          <div style="display: flex;flex-direction: row;align-items: center;padding-left: 24px;height: 80px">
            <img
              nz-image
              width="60px"
              height="60px"
              style="margin-right: 8px"
              [nzFallback]="hireDeviceService['ERRIMG']"
              [nzSrc]="data['goodsIcon']"
              [alt]="data['goodsName']"
            />
            <span>
          <span>{{data['goodsName']}}</span>
          </span>
          </div>
        </td>
        <td nzAlign="center">
          <div>用户租期：{{ data['rbtime'] }}至{{ data['retime'] }}</div>
          <div>租期：{{ data['rper'] }}</div>
          <div>期数：{{ data['nper'] }}</div>
        </td>

        <td nzAlign="center">￥{{ data['totalRent'] }}</td>
        <td nzAlign="center">
          <div *ngIf="data['deposit']===data['zmDeposit']">已付押金：全额免押</div>
          <div>￥{{ data['deposit'] }}</div>
        </td>
        <td nzAlign="center">
          <div>总金额：￥{{ data['realPrice'] }}<a (click)="showRealPayModal(data['rentPayInfoList'])">明细</a></div>
          <div (click)="showRentModal(data['rentBillRecordList'])">
            已交租金： <a style="color: #27D525">￥{{ data['payRent'] }}/￥{{ data['totalRent'] }}</a>
          </div>
        </td>
        <td nzAlign="center">{{ hireDeviceService['PLAN'][data['planId']] }}</td>
        <td nzAlign="center">
          <div>联系人：{{data['consignee']}}</div>
          <div>电话：{{data['tel']}}</div>
          <div>地址：{{data['area']}}{{data['address']}}</div>
        </td>
        <td nzAlign="center">{{ hireDeviceService.ORDERSTATUS[data['status']] }}</td>
        <td nzAlign="center">{{ data['createTime'] }}</td>
        <td nzAlign="center" nzRight>
          <a routerLink="/hireDevice/hireDeviceOrderDetail" [queryParams]="{id: data['id']}">详情</a>
          <a *ngIf="data['status']===1" nz-popconfirm nzPopconfirmTitle="确认要通过审核吗?"
             (nzOnConfirm)="showCheckModal(data)">通过审核</a>
          <!--          <a *ngIf="data['status']===1" (click)="showCheckModal(data)">审核</a>-->
          <a *ngIf="data['status']===3" (click)="showDeliverGoodsModal(data['id'])">发货</a>
          <!--          <a *ngIf="data['status']===3" (click)="showDeliverGoodsModal(data['id'])">发货</a>-->
          <a *ngIf="[4,5,6].includes(data['status'])" (click)="showExpressDetail(data)">查看物流</a>
          <a (click)="showTrackModal(data['id'])">跟进</a>
          <a *ngIf="[0,1,2,3,4].includes(data['status'])" (click)="showCancelOrderModal(data['id'])">取消订单</a>
        </td>
      </tr>
      <tr>
        <td [colSpan]="11">
          <button nz-button nzType="primary" *ngIf="data['userCertification']" (click)="showTenantModal(data)">查看租户凭证
          </button>
          <button nz-button nzType="primary" (click)="showSnapshot(data['id'])">交易快照</button>
          <a *ngIf="data['deliverUrl']" nz-button nzType="primary" style="color: white" [href]="data['deliverUrl']" target="_blank">交付确认单</a>
        </td>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
  <!-- 分页template -->
  <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
</nz-card>


<!--实付款明细-->
<nz-modal
  [nzVisible]="realPayModal.visible"
  nzTitle="实付款明细"
  nzWidth="1000px"
  [nzFooter]="null"
  (nzOnCancel)="hideRealPayModal()">
  <div *nzModalContent>
    <div>
      <nz-table #realPayTable [nzShowPagination]="false" nzBordered [nzData]="realPayModal.list"
                [nzScroll]="{ y: '600px' }"
                [nzPageSize]="9999">
        <thead>
        <tr>
          <th nzAlign="center" nzWidth="100px">序号</th>
          <th nzAlign="center">付款金额</th>
          <th nzAlign="center">付款时间</th>
          <th nzAlign="center">付款方式</th>
          <th nzAlign="center">付款内容</th>
          <th nzAlign="center">流水号</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of realPayTable.data;let index=index">
          <td nzAlign="center">{{index + 1}}</td>
          <td nzAlign="center">{{ data['amount'] }}</td>
          <td nzAlign="center">{{ data['payTime'] }}</td>
          <td nzAlign="center">{{ data['payWay'] === 0 ? '预授权代扣' : '支付宝手动支付' }}</td>
          <td nzAlign="center">{{ data['payNote'] }}</td>
          <td nzAlign="center">{{ data['payOrderNum'] }}</td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-modal>


<!--租金记录-->
<nz-modal
  [nzVisible]="rentModal.visible"
  nzTitle="租金记录"
  nzWidth="1000px"
  [nzFooter]="null"
  (nzOnCancel)="hideRentModal()">
  <div *nzModalContent>
    <div>
      <nz-table #rentModalTable [nzShowPagination]="false" nzBordered [nzData]="rentModal.list"
                [nzScroll]="{ y: '600px' }"
                [nzPageSize]="9999">
        <thead>
        <tr>
          <th nzAlign="center" nzWidth="100px">期数</th>
          <th nzAlign="center">应还租日期</th>
          <th nzAlign="center">应还租金</th>
          <th nzAlign="center">状态</th>
          <th nzAlign="center">本期结清时间</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of rentModalTable.data">
          <td nzAlign="center">{{ data['nper'] }}</td>
          <td nzAlign="center">{{ data['date'] }}</td>
          <td nzAlign="center">{{ data['rent'] }}</td>
          <td nzAlign="center">{{ hireDeviceService.payStatus[data['status']] }}</td>
          <td nzAlign="center">{{ data['payTime'] || '-' }}</td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-modal>

<!--发货-->
<nz-modal
  [nzVisible]="deliverGoodsModal.visible"
  nzTitle="发货"
  (nzOnOk)="deliverGoods()"
  (nzOnCancel)="hideDeliverGoodsModal()">
  <div *nzModalContent>
    <div class="row">
      <span class="label required">物流公司：</span>
      <nz-select [(ngModel)]="deliverGoodsModal.expressCode" nzPlaceHolder="请选择物流公司"
                 [nzBackdrop]="true"
                 nzAllowClear
                 nzShowSearch>
        <nz-option [nzValue]="l.content" [nzLabel]="l.name" *ngFor="let l of logistics"></nz-option>
      </nz-select>
    </div>
    <div class="row" *ngIf="deliverGoodsModal.expressCode==='SF'">
      <span class="label required">增值服务：</span>
      <nz-radio-group [(ngModel)]="deliverGoodsModal.expressVas">
        <label nz-radio [nzValue]="1">电子微签</label>
        <label nz-radio [nzValue]="2" nzDisabled>纸质回执单</label>
      </nz-radio-group>
    </div>
    <div class="row" *ngIf="deliverGoodsModal.expressCode!=='SF'">
      <span class="label required">物流单号：</span>
      <input nz-input placeholder="请输入物流单号" [(ngModel)]="deliverGoodsModal.expressNum"/>
    </div>
<!--    <div class="row">-->
<!--      <span class="label required">产品IMEI号：</span>-->
<!--      <input nz-input placeholder="请输入产品IMEI号" [(ngModel)]="deliverGoodsModal.imei"/>-->
<!--    </div>-->
  </div>
</nz-modal>

<!--审核-->
<nz-modal
  [nzVisible]="checkModal.visible"
  nzTitle="审核"
  (nzOnOk)="auditSubmit()"
  (nzOnCancel)="hideCheckModal()">
  <div *nzModalContent>
    <div class="row">
            <span class="label required">产品IMEI号：</span>
            <input nz-input placeholder="请输入产品IMEI号" [(ngModel)]="checkModal.imei"/>
    </div>
<!--    <div class="row">-->
<!--      <span class="label">扣款方式：</span>-->
<!--      <nz-radio-group [(ngModel)]="checkModal.deductWay">-->
<!--        <label nz-radio [nzValue]="0">首期款</label>-->
<!--        <label nz-radio [nzValue]="2">首期款+预扣款</label>-->
<!--      </nz-radio-group>-->
<!--    </div>-->
<!--    &lt;!&ndash;    首期扣款&ndash;&gt;-->
<!--    <div *ngIf="checkModal.deductWay===0">-->
<!--      <div class="row">-->
<!--        <span class="label required">首期款金额：</span>-->
<!--        ￥{{checkModal.firstRent}}-->
<!--      </div>-->
<!--      <div class="row">-->
<!--        <span class="label required">总扣款金额：</span>-->
<!--        ￥{{checkModal.firstRent}}-->
<!--        <span style="color: #999999">(首期款金额)</span>-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash;    首期扣款+预期扣款&ndash;&gt;-->
<!--    <div *ngIf="checkModal.deductWay===2">-->
<!--      <div class="row">-->
<!--        <div style="color: red">温馨提示：预扣款前先和客服协商同意，发起预扣款＞客户操作确认＞系统自动扣款，请注意扣款成功再发货。</div>-->
<!--        <span class="label required">预扣款期数：</span>-->
<!--        <nz-input-number nzPlaceHolder="期数" style="width: 100px;margin-right: 4px" [nzMin]="1"-->
<!--                         [nzMax]="checkModal.nper-1"-->
<!--                         [nzPrecision]="0"-->
<!--                         [(ngModel)]="checkModal.wper"></nz-input-number>-->
<!--        <span style="color: #999999">1≤预扣款期数≤(租期-1)</span>-->
<!--      </div>-->
<!--      <div class="row">-->
<!--        <span class="label">首期款金额：</span>-->
<!--        ￥{{checkModal.firstRent}}-->
<!--      </div>-->
<!--      <div class="row">-->
<!--        <span class="label">预扣款金额：</span>-->
<!--        ￥{{checkModal.wper === checkModal.nper - 1 ? checkModal.totalRent - checkModal.firstRent : checkModal.wper * checkModal.firstRent}}-->
<!--      </div>-->
<!--      <div class="row">-->
<!--        <span class="label required">总扣款金额：</span>-->
<!--        ￥{{checkModal.wper === checkModal.nper - 1 ? checkModal.totalRent : (checkModal.wper + 1) * checkModal.firstRent}}-->
<!--        <span style="color: #999999">(首期款金额+预扣款金额)</span>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</nz-modal>

<!--物流信息-->
<nz-modal
  [nzVisible]="expressModal.visible"
  nzTitle="物流信息"
  nzWidth="600px"
  [nzFooter]="null"
  (nzOnCancel)="hideExpressModal()">
  <div *nzModalContent>

    <div>物流单号：
      <nz-select nzPlaceHolder="请选择" [(ngModel)]="expressModal.currentExpressNum" [nzBackdrop]="true"
                 *ngFor="let exp of expressModal.expressList" (ngModelChange)="currentExpressChange()">
        <nz-option [nzValue]="exp.id" [nzLabel]="exp.expressNum"></nz-option>
      </nz-select>
    </div>
    <div>物流公司：{{expressModal.current.expressName}}</div>
    <div style="padding-top: 8px;max-height: 600px;overflow-y: auto">
      <nz-timeline>
        <nz-timeline-item *ngFor="let detail of expressModal.current.expressTraces">
          <div>{{detail['station']}}</div>
          <div style="color: #666666">{{detail['time']}}</div>
        </nz-timeline-item>
      </nz-timeline>
    </div>
  </div>
</nz-modal>

<!--取消订单-->
<nz-modal
  [nzVisible]="cancelOrderModal.visible"
  nzTitle="取消订单"
  nzCancelText="关闭"
  nzWidth="300px"
  (nzOnOk)="cancelOrder()"
  (nzOnCancel)="hideCancelOrderModal()">
  <div *nzModalContent>
    取消原因：
    <nz-select style="width: 170px" [(ngModel)]="cancelOrderModal.cancelNote" nzPlaceHolder="请选择取消原因"
               [nzBackdrop]="true"
               nzAllowClear
               nzShowSearch>
      <nz-option nzValue="审批不通过" nzLabel="审批不通过"></nz-option>
      <nz-option nzValue="用户不想租了" nzLabel="用户不想租了"></nz-option>
    </nz-select>
  </div>
</nz-modal>

<!--跟进模态框-->
<nz-modal nzWidth="1050px"
          [nzVisible]="trackModal.visible"
          nzTitle="跟进"
          (nzOnCancel)="hideTrackModal(false)"
          [nzFooter]="null"
>
  <ng-container *nzModalContent>
    <textarea rows="4" nz-input placeholder="请输入跟进内容" style="width: 100%" [(ngModel)]="trackModal.remark"></textarea>
    <div style="margin-top: 8px;display: flex;justify-content: space-between">
      <nz-upload [(nzFileList)]="trackModal.file" [nzAccept]="'image/*,.pdf,.txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx'"
                 [nzBeforeUpload]="beforeUpload">
        <button nz-button>
          选择文件
        </button>
        <span>请选择图片、office文件、PDF文件</span>
      </nz-upload>
      <button nz-button nzType="primary" (click)="hideTrackModal(true)">保存</button>
    </div>
    <nz-row style="margin-top: 8px;max-height: 604px;overflow-y: auto" *ngIf="trackList.length">
      <!--      <nz-divider nzText="跟进信息"></nz-divider>-->
      <nz-timeline style="padding: 8px;width: 100%">
        <nz-timeline-item [nzLabel]="lt['createTime']"
                          *ngFor="let lt of trackList">
          {{lt['station']}}
          <div>{{lt['follower']}}</div>
          <div>{{lt['content']}}</div>
          <a *ngIf="lt['enclosure']" [href]="lt['enclosure']" style="color: #008dff" target="_blank">点击查看</a>
        </nz-timeline-item>
      </nz-timeline>
    </nz-row>
  </ng-container>
</nz-modal>

<!--租户凭证-->
<nz-modal
  [nzVisible]="tenantModal.visible"
  nzTitle="租户凭证"
  [nzFooter]="null"
  nzWidth="672px"
  (nzOnCancel)="tenantModal.visible=false">
  <div *nzModalContent>
    <div class="row">
      <span style="margin-right: 8px">姓名：{{tenantModal?.userCertInfo?.certName}}</span>
      <span>身份证号：{{tenantModal?.userCertInfo?.certNo}}</span>
    </div>
    <div>
      <span style="display: inline-flex;flex-direction: column;align-items: center;margin-right: 24px">
        <img
          nz-image
          width="300px"
          height="180px"
          [nzFallback]="hireDeviceService['ERRIMG']"
          [nzSrc]="tenantModal?.userCertInfo?.userImage"
        />
        <a [href]="tenantModal?.userCertInfo?.userImage" target="_blank" style="color: #1890FF">头像面</a>
      </span>
      <span style="display: inline-flex;flex-direction: column;align-items: center">
        <img
          nz-image
          width="300px"
          height="180px"
          [nzFallback]="hireDeviceService['ERRIMG']"
          [nzSrc]="tenantModal?.userCertInfo?.userBackImage"
        />
        <a [href]="tenantModal?.userCertInfo?.userBackImage" target="_blank" style="color: #1890FF">国徽面</a>
      </span>
    </div>
  </div>
</nz-modal>

<!--交易快照-->
<nz-modal
  [nzVisible]="snapshotModal.visible"
  nzTitle="交易快照"
  [nzFooter]="null"
  nzWidth="423px"
  (nzOnCancel)="snapshotModal.visible=false">
  <div *nzModalContent>
    <div class="snapshotContent">
      <div style="height: 375px;text-align: center">
        <nz-carousel [nzEffect]="'scrollx'">
          <div nz-carousel-content *ngFor="let img of snapshotModal.data.goods.imgs">
            <div style="position: relative">
              <div style="position: absolute;width: 100%;height: 100%"></div>
              <img
                nz-image
                style="width: 375px;height: 375px"
                [nzFallback]="hireDeviceService['ERRIMG']"
                [nzSrc]="img"
              />
            </div>
          </div>
        </nz-carousel>
      </div>
      <div class="snapshotRow">
        <h1 style="font-size: 24px">{{snapshotModal.data.order.goodsName}}</h1>
      </div>
      <div class="snapshotRow">
        <h1 style="font-size: 18px">{{snapshotModal.data.goods.minRentDay}}/天起</h1>
        <span>×1</span>
      </div>
      <div class="snapshotRow">
        <span>已选</span>
        <span>{{snapshotModal.data.order.goodsDesc}}</span>
      </div>
      <div class="snapshotRow">
        <span>数量</span>
        <span>{{snapshotModal.data.order.buyNum}}</span>
      </div>
      <div class="snapshotRow">
        <span>租期</span>
        <span>{{snapshotModal.data.order.rbtime}}至{{snapshotModal.data.order.retime}}</span>
      </div>
      <div class="snapshotRow">
        <span>租金</span>
        <span>￥{{snapshotModal.data.order.goodsPrice}}/天</span>
      </div>
      <div class="snapshotRow">
        <span>总租金</span>
        <span>￥{{snapshotModal.data.order.totalRent}}</span>
      </div>
      <div class="snapshotRow">
        <span>快照时间</span>
        <span>{{snapshotModal.data.order.createTime}}</span>
      </div>
      <div class="snapshotRow">
        <span>商品押金</span>
        <span>￥{{snapshotModal.data.order.deposit}}</span>
      </div>
      <div class="snapshotRow">
        <span>到期买断价格</span>
        <span>￥{{snapshotModal.data.order.expBuyout}}</span>
      </div>
      <div>
        <nz-tabset>
          <nz-tab nzTitle="商品信息">
            <div style="max-height: 600px;overflow-y: auto;position: relative">
              <div style="width: 100%;height: 100%;position: absolute;"></div>
              <span *ngIf="snapshotModal.data.goods.goodsInfo" style="display: inline-flex;flex-direction: column;">
              <img width="375px" [src]="img" *ngFor="let img of snapshotModal.data.goods.goodsInfo">
            </span>
            </div>
          </nz-tab>
          <nz-tab nzTitle="租赁说明">
            <div style="max-height: 600px;overflow-y: auto;position: relative">
              <div style="width: 100%;height: 100%;position: absolute;"></div>
              <span *ngIf="snapshotModal.data.goods.leaseExplainImg"
                    style="display: inline-flex;flex-direction: column;">
              <img width="375px" [src]="img" *ngFor="let img of snapshotModal.data.goods.leaseExplainImg">
            </span>
            </div>
          </nz-tab>
          <nz-tab nzTitle="常见问题">
            <nz-tabset>
              <nz-tab *ngFor="let faq of snapshotModal.data.goodsFaq" [nzTitle]="faq.name">
                <nz-collapse>
                  <nz-collapse-panel
                    *ngFor="let q of faq['list']"
                    [nzHeader]="q['question']"
                  >
                    <p style="margin:0;">
                      {{q['answer']}}
                    </p>
                  </nz-collapse-panel>
                </nz-collapse>
              </nz-tab>
            </nz-tabset>
          </nz-tab>
        </nz-tabset>
      </div>
    </div>
  </div>
</nz-modal>
